<template>
    <div id='login'>
       <el-card class='e_c'>
           <div slot="header">
               <span>登陆</span>
           </div>
        <el-form :model="formLoginData" ref="login"  :rules="rules" label-width="80px">
            <el-form-item label="用户名">
                <el-input v-model="formLoginData.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input type="password" v-model="formLoginData.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login" class='login_l'>登陆</el-button>
                <router-link to='/regist' class='login_r'>注册</router-link>
            </el-form-item>
        </el-form>
     </el-card>
     {{formLoginData}}
    </div>
</template>
<script src="/validate.min.js"></script>
<script>
export default {
  data() {
    return {
      formLoginData: {
        username: "",
        password: ""
      },
      rules: {
        username: {
          required: true,
          message: "用户名必须填写",
          trigger: "blur"
        },
        password: {
          required: true,
          message: "密码必须填写",
          trigger: "blur"
        }
      }
    };
  },
  methods: {
    login() {
      this.$refs.login.validate(valid => {
        if (!valid) {
          return;
        }
        this.$http
          .post("/users/login", this.$qs.stringify(this.formLoginData))
          .then(result => {
            if (result.data.error == 0) {
              this.$router.push("/index");
            } else {
              this.$message.error("用户名或密码错误！");
            }
          });
      });
    }
  }
};
</script>
<style>
a {
  text-decoration: none;
}
.e_c {
  margin: 0 auto;
  width: 400px;
}
.login_r {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
  line-height: 40px;
  position: relative;
  font-size: 14px;
  display: inline-block;
  border-radius: 4px;
  text-align: center;
  padding: 0 20px;
  margin-left: 72px;
}
.login_l {
  margin-left: 26px;
}
</style>
